<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <!-- <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="第一天（他币）数量">
              <a-input placeholder="请输入第一天（他币）数量" v-model="queryParam.oneDayNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="第二天（他币）数量">
              <a-input placeholder="请输入第二天（他币）数量" v-model="queryParam.twoDayNumber"></a-input>
            </a-form-item>
          </a-col>
        <template v-if="toggleSearchStatus">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="第三天（他币）数量">
              <a-input placeholder="请输入第三天（他币）数量" v-model="queryParam.threeDayNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="第四天（他币）数量">
              <a-input placeholder="请输入第四天（他币）数量" v-model="queryParam.fourDayNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="第五天(他币)数量">
              <a-input placeholder="请输入第五天(他币)数量" v-model="queryParam.fiveDayNumber"></a-input>
            </a-form-item>
          </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div> -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary">保存</a-button>
    </div>
    <div class="content">
      <div
        class="one_day"
        v-for="item in list"
        :key="item.index"
        :style="{
          marginLeft: item.index != 1 ? '20px' : '0',
          border: item.bordercolor,
        }"
        @click.stop="Selectday(item.index, item.id)"
        @mousemove="Moveday(item.index)"
      >
        <div class="day">{{ item.day }}</div>
        <div class="one_Input">
          <a-input-number
            v-model="item.daynum"
            @change="InputChange($event, item.index)"
            :max="99999"
            :min="1"
            :parser="parseValue"
          />
          <img src="../../../assets/tabi.png" alt="" class="tabimg" />
        </div>
      </div>
    </div>
    <div class="footer">
      <div>签到规则:</div>
      <j-editor v-model="busdata.rules" />
      <br />
      <div>{{ busdata.rules }}</div>
    </div>
  </a-card>
</template>

<script>
import "@/assets/less/TableExpand.less";
import { busSignRulelist, busSignRuleedit, busSignRuleadd } from "@/api/tsapi";
import JEditor from "@/components/jeecg/JEditor";
export default {
  name: "busSignRuleList",
  components: {
    JEditor,
  },
  data() {
    return {
      description: "签到规则管理管理页面",
      // 表头
      columns: [
        {
          title: "第一天（他币）数量",
          align: "center",
          dataIndex: "oneDayNumber",
        },
        {
          title: "第二天（他币）数量",
          align: "center",
          dataIndex: "twoDayNumber",
        },
        {
          title: "第三天（他币）数量",
          align: "center",
          dataIndex: "threeDayNumber",
        },
        {
          title: "第四天（他币）数量",
          align: "center",
          dataIndex: "fourDayNumber",
        },
        {
          title: "第五天(他币)数量",
          align: "center",
          dataIndex: "fiveDayNumber",
        },
        {
          title: "第6天（他币）数量",
          align: "center",
          dataIndex: "sixDayNumber",
        },
        {
          title: "第七天（他币）数量",
          align: "center",
          dataIndex: "sevenDayNumber",
        },
        {
          title: "签到规则",
          align: "center",
          dataIndex: "rules",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        // list: "/signrule/busSignRule/list",
        delete: "/signrule/busSignRule/delete",
        deleteBatch: "/signrule/busSignRule/deleteBatch",
        exportXlsUrl: "signrule/busSignRule/exportXls",
        importExcelUrl: "signrule/busSignRule/importExcel",
      },
      busdata: {
        oneDayNumber: "",
        twoDayNumber: "",
        threeDayNumber: "",
        fourDayNumber: "",
        fiveDayNumber: "",
        sixDayNumber: "",
        sevenDayNumber: "",
      },
      list: [],
    };
  },
  mounted() {
    this.Daylist();
  },
  methods: {
    Daylist() {
      //获取数据
      busSignRulelist().then((res) => {
        console.log(res.result.records[0], "111");
        if (res.result.records[0] != undefined) {
          this.busdata = res.result.records[0];
        }

        if (res.code == 200) {
          const data = res.result.records[0];
          this.list.push({
            daynum: res.result.records.length != 0 ? data.oneDayNumber : "",
            day: "第一天",
            index: 1,
            id: res.result.records.length != 0 ? data.id : "",
            bordercolor: "1px solid rgb(167, 165, 165)",
          });
          this.list.push({
            daynum: res.result.records.length != 0 ? data.twoDayNumber : "",
            day: "第二天",
            index: 2,
            id: res.result.records.length != 0 ? data.id : "",
            bordercolor: "1px solid rgb(167, 165, 165)",
          });
          this.list.push({
            daynum: res.result.records.length != 0 ? data.threeDayNumber : "",
            day: "第三天",
            index: 3,
            id: res.result.records.length != 0 ? data.id : "",
            bordercolor: "1px solid rgb(167, 165, 165)",
          });
          this.list.push({
            daynum: res.result.records.length != 0 ? data.fourDayNumber : "",
            day: "第四天",
            index: 4,
            id: res.result.records.length != 0 ? data.id : "",
            bordercolor: "1px solid rgb(167, 165, 165)",
          });
          this.list.push({
            daynum: res.result.records.length != 0 ? data.fiveDayNumber : "",
            day: "第五天",
            index: 5,
            id: res.result.records.length != 0 ? data.id : "",
            bordercolor: "1px solid rgb(167, 165, 165)",
          });
          this.list.push({
            daynum: res.result.records.length != 0 ? data.sixDayNumber : "",
            day: "第六天",
            index: 6,
            id: res.result.records.length != 0 ? data.id : "",
            bordercolor: "1px solid rgb(167, 165, 165)",
          });
          this.list.push({
            daynum: res.result.records.length != 0 ? data.sevenDayNumber : "",
            day: "第七天",
            index: 7,
            id: res.result.records.length != 0 ? data.id : "",
            bordercolor: "1px solid rgb(167, 165, 165)",
          });
          console.log(this.list, "list");
        }
      });
    },
    //选中事件
    Selectday(index) {
      console.log(index);
      this.$nextTick(() => {
        for (let i = 0; i < this.list.length; i++) {
          if (i == index - 1) {
            this.list[i].bordercolor = "2px solid rgb(55, 169, 255)";
          } else {
            this.list[i].bordercolor = "1px solid rgb(167, 165, 165)";
          }
        }
      });
    },
    InputChange(e, index) {
      console.log(e, index);
      if (e > 99999) {
        this.$message.warning("最大为五位数!");
      }
      if (index == 1) {
        this.busdata.oneDayNumber = index == 1 ? e : this.busdata.oneDayNumber;
      } else if (index == 2) {
        this.busdata.twoDayNumber = index == 2 ? e : this.busdata.twoDayNumber;
      } else if (index == 3) {
        this.busdata.threeDayNumber =
          index == 3 ? e : this.busdata.threeDayNumber;
      } else if (index == 4) {
        this.busdata.fourDayNumber =
          index == 4 ? e : this.busdata.fourDayNumber;
      } else if (index == 5) {
        this.busdata.fiveDayNumber =
          index == 5 ? e : this.busdata.fiveDayNumber;
      } else if (index == 6) {
        this.busdata.sixDayNumber = index == 6 ? e : this.busdata.sixDayNumber;
      } else {
        this.busdata.sevenDayNumber =
          index == 7 ? e : this.busdata.sevenDayNumber;
      }
    },
    //移入事件
    Moveday(index) {
      this.$nextTick(() => {
        for (let i = 0; i < this.list.length; i++) {
          if (i == index - 1) {
            this.list[i].bordercolor = "2px solid rgb(55, 169, 255)";
          } else {
            this.list[i].bordercolor = "1px solid rgb(167, 165, 165)";
          }
        }
      });
    },
    //限制年龄小数点和负数
    parseValue(value) {
      // 如果输入值不是数字或者小数，则返回1
      if (isNaN(value) || value.indexOf(".") !== -1 || value < 0) {
        this.$message.warning("请输入正确得格式(最多输入五位数!)");
        value.match(/^\d{0,5}/)[0];
        return 1;
      }

      return value;
    },
    //保存事件
    handleAdd() {
      console.log(this.busdata.id, "busdata");
      if (this.busdata.id == undefined) {
        busSignRuleadd(this.busdata).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.Daylist();
            this.list = [];
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        busSignRuleedit(this.busdata).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.Daylist();
            this.list = [];
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
@import "~@assets/less/common.less";
.content {
  display: flex;
  margin-top: 40px;
  .one_day {
    width: 10vw;
    height: 100px;
    // border: 1px solid rgb(69, 41, 213);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .day {
      // color: black;
    }
    .one_Input {
      padding-top: 10px;
    }
    .tabimg {
      width: 30px;
      height: 30px;
      margin-left: 6px;
    }
  }
}

@media screen and (min-width: 500px) and (max-width: 1600px) {
  .footer {
    margin-top: 50px;
    width: 1196px;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1920px) {
  .footer {
    margin-top: 50px;
    width: 1464px;
  }
}
</style>
